<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>MyTvResize</title>

		<!-- TODO : Common API -->
		<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
		<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
		<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>
		<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
  		<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
		
		<!-- TODO : Javascript code -->
		<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
		

		<!-- TODO : Style sheets code -->
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
		<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">

		<!-- TODO: Plugins -->

	</head>

	<body onload="Main.onLoad();" onunload="Main.onUnload();">

		<!-- Dummy anchor as focus for key events -->
		<a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>

		<!-- TODO: your code here -->
		
		<!-- TODO: your code here -->
	<div id="container">
		<div id="videoPanel">
			
		</div>
		<div id="ticker">
			<div id="img_thumbnail">
				<img id="img_thumbnail_1" alt="image" src="" width="50px"
					height="50px;" />
			</div>
			<div id="ticker_product_description"></div>
			<div class="ticker_buynow">Press ENTER to BUY NOW !</div>
		</div>
		<div id="rightpane">
			<div id="product_details">
				PRODUCT DETAILS
			</div>
			<div id="productTitle">
				
			</div>
			<div id="product-middle-container">
				<div id="leftswipe">
					<img alt="" src="app/images/previous.jpg" />
				</div>
				<div id="product_image">
					<img id="image_big" alt="IMAGE" src="app/images/samplethumbnail.png" width="250px" height="250px"/>
				</div>
				<div id="rightswipe">
					<img alt="" src="app/images/next.jpg" />
				</div>
			</div>
			<div id="product_price">
			</div>
			<div id="product_description">
				
			</div>
		</div>
		<div id="bottomPane">
			<div id="back_button">
				<div class="remote_button_a">A</div> <a href="javascript:void(0);"> BACK </a>
			</div>
			<div id="wishlist_button">
				<div class="remote_button_c">C</div> <a href="javascript:void(0);">ADD TO CART</a>
			</div>
			<div id="addtocart_button">
				<div class="remote_button_d">D</div> <a href="javascript:void(0);">BUY NOW</a>
			</div>
		</div>
	</div>
	
	<!-- add to cart page html -->
	<div id="addtocart_container">

		<div id="cart_items">
			<div class="cart_items_header">
				<h1>Your Cart Items</h1>
			</div>
			<div id="list_cart">			
			
			</div>			
		</div>

		<div id="shipping_details">
			<div class="shipping_details_header">
				<h3>Shipping Details</h3>
			</div>
			<div id="addressList">
			
			</div>
		</div>

		<div id="payment_details">
			<div class="payment_details_header">
				<h3>Payment Details</h3>
			</div>
			<div>
				<div class="card"> 
					<div class='cardnumber'>
						<div class='cardnumberlabel'> CARD NUMBER </div>
						<div class='cardnumbervalue'> 4080 XXXX XXXX XXXX</div>
					</div>
					
					<div class='expirydate'>
						<div class='expirydatelabel'> EXPIRY DATE </div>
						<div class='expirydatevalue'> 09/2021 </div>
					</div>
					
					<div class='cvv'>
						<div class='cvvlabel'> ENTER CVV</div>
						<div class='cvvvalue'>  XXX </div>
					</div>
				</div>
				<div id="paymentAmount">
				
				</div>
			</div>
			<div id="payButton">
				PAY
			</div>
		</div>

		<div id="addtocart_footer">
			Copyrights &copy; Avnet Inc., Chennai
		</div>
	</div>

	<div id="dialog-confirm" title="Hey.,">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Product has been added to your cart !
				<a href="javascript:void(0);" id="anchor1" onkeydown="Main.keyDown();"></a>
		</p>
	</div>
	
	<div id="order-confirm" title="Confirmation">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Your order has been placed !
				<a href="javascript:void(0);" id="anchor2" onkeydown="Main.keyDown();"></a>
		</p>
	</div>
	
	<div class="customDialog">
		<div class="customDialog_title">Sample Title</div>
		<div class="customDialog_titlelowerline"></div>
		<div class="customDialog_info">Your Order has been placed.</div>
		<div class="customDialog_titlelowerline"></div>
		<div class="customDialog_note">Press B to close this information</div>
	</div>
	
	
		
		
	</body>
</html>
